<template>
  <div class="app-container calendar-list-container backcontent">
    <div class="first_table_steps">
      <div class="tableContent" ref="leftContent">
        <div class="titleCss">客户基础信息</div>
        <div class="bg-cust-detail">
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple-light">用户编号: {{ customerInfo.customerId }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">平台编号: {{ customerInfo.platformId }}</div></el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">客户类型:
                <span v-if="customerInfo.customerType == 'CUST00'">
                  平台
                </span>
                <span v-if="customerInfo.customerType == 'CUST01'">
                  商户
                </span>
                <span v-if="customerInfo.customerType == 'CUST02'">
                  用户
                </span>
              </div>
            </el-col>
            <el-col :span="6"><div class="grid-content bg-purple">登录密码错误次数: {{ customerInfo.passwordErrorCount }}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple-light">支付密码错误次数: {{ customerInfo.payPasswordErrorCount }}</div></el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">登录密码状态: 
                <span v-if="customerInfo.passwordStatus == '00'">
                  正常
                </span>
                <span v-if="customerInfo.passwordStatus == '01'">
                  未设置
                </span>
                <span v-if="customerInfo.passwordStatus == '02'">
                  锁定
                </span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">支付密码状态: 
                <span v-if="customerInfo.payPasswordStatus == '00'">
                  正常
                </span>
                <span v-if="customerInfo.payPasswordStatus == '01'">
                  未设置
                </span>
                <span v-if="customerInfo.payPasswordStatus == '02'">
                  锁定
                </span>
              </div>
            </el-col>
            <el-col :span="6"><div class="grid-content bg-purple">个人客户编号: {{ customerInfo.personalId }}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple-light">商户客户编号: {{ customerInfo.merchantId }}</div></el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">账户状态:
                <span v-if="customerInfo.status == '00'">
                  正常
                </span>
                <span v-if="customerInfo.status == '01'">
                  客户冻结
                </span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">认证状态:
                <span v-if="customerInfo.authenticationStatus == '00'">
                  未认证
                </span>
                <span v-if="customerInfo.authenticationStatus == '01'">
                  无需认证
                </span>
                <span v-if="customerInfo.authenticationStatus == '02'">
                  认证成功
                </span>
                <span v-if="customerInfo.authenticationStatus == '03'">
                  认证失败
                </span>
              </div>
            </el-col>
            <el-col :span="6"><div class="grid-content bg-purple">注册时间: {{ customerInfo.registerTime }}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple-light">注册IP: {{ customerInfo.registerIp }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">上次登录时间: {{ customerInfo.loginTime }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">上次登录IP: {{ customerInfo.loginIp }}</div></el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">最后登录角色: 
                <span v-if="customerInfo.lastLoginRole == '01'">
                  个人客户
                </span>
                <span v-if="customerInfo.lastLoginRole == '02'">
                  商户客户
                </span>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="titleCss">个人客户基础信息</div>
        <div class="bg-cust-detail">
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple-light">个人客户编号: {{ personalInfo.personalId }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">平台编号: {{ personalInfo.platformId }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">用户编号: {{ personalInfo.customerId }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">第三方会员编号: {{ personalInfo.thirdNo }}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple-light">用户名称: {{ personalInfo.realName }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">身份证号: {{ personalInfo.idNumber }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">用户昵称: {{ personalInfo.nickName }}</div></el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">性别: {{ personalInfo.sex }}
                <span v-if="personalInfo.sex == '1'">
                  男
                </span>
                <span v-if="personalInfo.sex == '2'">
                  女
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple-light">生日: {{ personalInfo.birthday }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">居住地: {{ personalInfo.address }}</div></el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">认证状态:
                <span v-if="personalInfo.authenticationStatus == '00'">
                  未认证
                </span>
                <span v-if="personalInfo.authenticationStatus == '01'">
                  无需认证
                </span>
                <span v-if="personalInfo.authenticationStatus == '02'">
                  认证成功
                </span>
                <span v-if="personalInfo.authenticationStatus == '03'">
                  认证失败
                </span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">账户状态:
                <span v-if="personalInfo.status == '00'">
                  正常
                </span>
                <span v-if="personalInfo.status == '01'">
                  冻结
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple-light">归属人: {{ personalInfo.owner }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">手机号: {{ personalInfo.phone }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">备注: {{ personalInfo.remark }}</div></el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">客户等级: 
                <span v-if="personalInfo.personalLevel == 1">
                  一级
                </span>
                <span v-if="personalInfo.personalLevel == 2">
                  二级
                </span>
                <span v-if="personalInfo.personalLevel == 3">
                  三级
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple">行业: {{ personalInfo.industry }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">行业描述: {{ personalInfo.industryDescription }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">职务: {{ personalInfo.job }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">所在省: {{ personalInfo.provinces }}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple">电子邮件: {{ personalInfo.email }}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">邮编: {{ personalInfo.zipCode }}</div></el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">个人客户类型:
                <span v-if="personalInfo.personalType == '00'">
                  注册用户
                </span>
                <span v-if="personalInfo.personalType == '01'">
                  运营添加用户
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple-light"><div class="content-title">身份证正面:</div> <img class="imageCss01" v-bind:src="personalInfo.idPositive"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"><div class="content-title">身份证反面:</div> <img class="imageCss01" v-bind:src="personalInfo.idNegative"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"><div class="content-title">用户头像:</div> <img class="imageCss02" v-bind:src="personalInfo.avatar"></div></el-col>
          </el-row>
        </div>
      </div>
      <div class="stepsContent"  ref="rightContent">
        <div class="titleCss">客户跟进信息  <el-button size="small" type="primary" @click="handleAddPersonalTracking">新增</el-button></div>
        <div class="bg-steps-detail">
          <div style="height: 300px;" ref="trackingSteps">
            <el-steps direction="vertical">
              <el-step v-for="(item, index) in trackingList" :key="index" :title="item.remark" description=""></el-step>
            </el-steps>
          </div>
        </div>
      </div>
    </div>

    <div v-if="personalAccountList != '' && personalAccountList != null && personalAccountList != undefined">
      <div class="titleCss">个人客户账户信息</div>
      <div class="bg-cust-detail">
        <el-row  v-for="(item, index) in personalAccountList" :key="index">
          <el-col :span="6"><div class="grid-content bg-purple-light">账户编号: {{ item.accountId }}</div></el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">账户类型: 
              <span v-if="item.accountType === 'ACC001'">余额账户</span>
              <span v-if="item.accountType === 'ACC002'">红包账户 </span>
              <span v-if="item.accountType === 'ACC003'">积分账户 </span>
              <span v-if="item.accountType === 'ACC004'">手续费账户 </span>
              <span v-if="item.accountType === 'ACC005'">已结算账户 </span>
              <span v-if="item.accountType === 'ACC006'">交易金额账户 </span>
              <span v-if="item.accountType === 'ACC007'">冻结金额账户 </span>
              <span v-if="item.accountType === 'ACC008'">平台管理账户 </span>
              <span v-if="item.accountType === 'ACC009'">平台服务费账户 </span>
            </div>
          </el-col>
          <el-col :span="6"><div class="grid-content bg-purple">账户余额: {{ item.accountBalance }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">冻结金额: {{ item.freezeBalance }}</div></el-col>
        </el-row>
      </div>
    </div>
    
    <div>
      <div class="titleCss">客户绑定银行卡    <el-button size="small" type="primary" @click="handleAddPersonalCard">新增</el-button></div>
      <div class="bg-cust-account">
        <el-table  :data="personalCardList" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="客户编号" width="200">
            <template slot-scope="scope">
              <span>{{scope.row.personalId}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="银行卡号" width="278">
            <template slot-scope="scope">
              <span>{{scope.row.bindCardNo}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="持卡人姓名" width="150">
            <template slot-scope="scope">
              <span>{{scope.row.cardholderName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="银行编号" width="190">
            <template scope="scope">
              <span>{{scope.row.bankNo}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="银行名称" width="260">
            <template scope="scope">
              <span>{{scope.row.bankName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="支行编号" width="200">
            <template scope="scope">
              <span>{{scope.row.subbranchNo}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="支行名称" width="260">
            <template scope="scope">
              <span>{{scope.row.subbranchName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" width="100">
            <template scope="scope">
              <span v-if="scope.row.status == '00'">待验证</span>
              <span v-if="scope.row.status == '01'">绑定</span>
              <span v-if="scope.row.status == '02'">解绑</span>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="pagination-container">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQueryCard.page" :page-sizes="[10,20,30, 50]" :page-size="listQueryCard.limit" layout="total, sizes, prev, pager, next, jumper" :total="totalCard"> </el-pagination>
        </div>
      </div>
    </div>
    <div>
      <div class="titleCss">推荐客户信息</div>
      <div class="bg-cust-detail" v-if="parentPersonalBase != '' && parentPersonalBase != null && parentPersonalBase != undefined">
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple-light">上级编号: {{ parentPersonalBase.personalId }}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">上级名称: {{ parentPersonalBase.realName }}</div></el-col>
        </el-row>
      </div>
      <div class="bg-cust-account">
        <el-table  :data="childPersonals" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="客户编号" width="400">
            <template slot-scope="scope">
              <span>{{scope.row.personalId}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="客户上级编号" width="400">
            <template scope="scope">
              <span>{{scope.row.parentPerId}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="客户姓名" width="400">
            <template scope="scope">
              <span>{{scope.row.realName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="客户级别" width="400">
            <template scope="scope">
              <span v-if="scope.row.parentLevel == 1">一级</span>
              <span v-if="scope.row.parentLevel == 2">二级</span>
              <span v-if="scope.row.parentLevel == 3">三级</span>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="pagination-container">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQueryCard.page" :page-sizes="[10,20,30, 50]" :page-size="listQueryCard.limit" layout="total, sizes, prev, pager, next, jumper" :total="totalCard"> </el-pagination>
        </div>
      </div>
    </div>


    <!-- 绑定银行卡 -->
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogAddpersonalCard">
        <el-form :rules="ruleAccounts" ref="personalCardForm" :model="personalCardForm" status-icon label-position="left" label-width="150px" style='width: 400px; margin-left:50px;'>
          <el-form-item label="平台编号: " prop="platformId">
            <el-input v-model="personalCardForm.platformId" disabled=""></el-input>
          </el-form-item>
          <el-form-item label="个人客户编号: " prop="personalId">
            <el-input v-model="personalCardForm.personalId" disabled=""></el-input>
          </el-form-item>
          <el-form-item label="银行卡号: " prop="bindCardNo">
            <el-input v-model="personalCardForm.bindCardNo"></el-input>
          </el-form-item>
          <el-form-item label="持卡人姓名: " prop="cardholderName">
            <el-input v-model="personalCardForm.cardholderName"></el-input>
          </el-form-item>
          <el-form-item label="银行编号: " prop="bankNo">
            <el-input v-model="personalCardForm.bankNo"></el-input>
          </el-form-item>
          <el-form-item label="银行名称: " prop="bankName">
            <el-input v-model="personalCardForm.bankName"></el-input>
          </el-form-item>
          <el-form-item label="支行编号: " prop="subbranchNo">
            <el-input v-model="personalCardForm.subbranchNo"></el-input>
          </el-form-item>
          <el-form-item label="支行信息: " prop="subbranchName">
            <el-input v-model="personalCardForm.subbranchName"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddpersonalCard = false">取消</el-button>
          <el-button v-if="dialogStatus === 'create'" type="primary" @click="createCardInfo('personalCardForm')">保存</el-button>
          <el-button v-if="dialogStatus === 'update'" type="primary" @click="updateCardInfo('personalCardForm')">保存</el-button>
        </div>
      </el-dialog>

      <!-- 添加跟踪记录 -->
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogAddpersonalTracking">
        <el-form ref="personalTrackForm" :model="personalCardForm" status-icon label-position="left" label-width="150px" style='width: 400px; margin-left:50px;'>
          <el-form-item label="平台编号: ">
            <el-input v-model="personalTrackForm.platformId" disabled=""></el-input>
          </el-form-item>
          <el-form-item label="个人客户编号: ">
            <el-input v-model="personalTrackForm.personalId" disabled=""></el-input>
          </el-form-item>
          <el-form-item label="备注: ">
            <el-input type="textarea" v-model="personalTrackForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddpersonalTracking = false">取消</el-button>
          <el-button v-if="dialogStatus === 'create'" type="primary" @click="createPersinalTracking('personalTrackForm')">保存</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import { getCustObj, getPersonalObj, getPerAccObj, getPerCardObj, addPerCardObj, queryPeopleNetwork, addPerTracking, queryTrackingList } from '@/api/crm/customers/personalBaseDetail'
import { mapGetters } from 'vuex'
export default {
  name: 'personalBaseDetail',
  data() {
    return {
      personalId: '',
      customerId: '',
      customerInfo: '',
      personalInfo: '',
      personalAccountList: [],
      personalCardList: [],
      childPersonals: [],
      trackingList: [],
      trackingLength: 0,
      stepsTotalHeight: 300,
      parentPersonalBase: '',
      listQueryCard: {
        page: 1,
        limit: 10,
        personalId: ''
      },
      totalCard: 0,
      dialogAddpersonalCard: false,
      dialogAddpersonalTracking: false,
      personalCardForm: {
        platformId: '',
        personalId: '',
        bindCardNo: '',
        cardholderName: '',
        bankNo: '',
        bankName: '',
        subbranchNo: '',
        subbranchName: ''
      },
      personalTrackForm: {
        platformId: '',
        tickerPersonalId: '',
        personalId: '',
        remark: ''
      },
      textMap: {
        create: '创建',
        update: '编辑'
      },
      listLoading: false,
      dialogStatus: '',
      ruleAccounts: {
        platformId: [
          {
            required: true,
            message: '请选择平台编号',
            trigger: 'blur'
          }
        ],
        personalId: [
          {
            required: true,
            message: '请输入个人客户编号',
            trigger: 'blur'
          }
        ],
        bindCardNo: [
          {
            required: true,
            message: '请输入银行卡号',
            trigger: 'blur'
          }
        ],
        cardholderName: [
          {
            required: true,
            message: '请输入持卡人姓名',
            trigger: 'blur'
          }
        ],
        bankName: [
          {
            required: true,
            message: '请输入银行名称',
            trigger: 'blur'
          }
        ]
      },
      screenWidth: document.body.clientWidth
    }
  },
  created() {
  },
  computed: {
    ...mapGetters([
      'elements',
      'name',
      'userId'
    ])
  },
  mounted: function() {
    this.personalId = this.$route.query.personalId
    this.getPersonalInfo()
    this.getPerAccList()
    this.getPersonalCardList()
  },
  watch: {
    trackingLength: function() {
      this.changeStepsHeight(this.trackingLength)
    },
    screenWidth: function() {
      this.$refs.rightContent.style.height = this.$refs.leftContent.style.height + 'px'
      this.$refs.trackingSteps.style.height = (this.$refs.leftContent.style.height - 62) + 'px'
    }
  },
  methods: {
    changeStepsHeight(trackingLength) { // 动态修改样式
      var divHeight = trackingLength * 100
      this.$refs.trackingSteps.style.height = divHeight + 'px'
    },
    handleAddPersonalTracking() {
      this.resetForm()
      this.personalTrackForm.personalId = this.personalInfo.personalId
      this.personalTrackForm.platformId = this.personalInfo.platformId
      this.dialogStatus = 'create'
      this.dialogAddpersonalTracking = true
    },
    handleAddPersonalCard() {
      this.resetForm()
      this.personalCardForm.personalId = this.personalInfo.personalId
      this.personalCardForm.platformId = this.personalInfo.platformId
      this.personalCardForm.tickerPersonalId = this.userId
      this.dialogStatus = 'create'
      this.dialogAddpersonalCard = true
    },
    createPersinalTracking(formName) {
      this.dialogAddpersonalTracking = false
      addPerTracking(this.personalTrackForm)
        .then((response) => {
          this.$notify({
            title: '成功',
            message: '创建成功',
            type: 'success',
            duration: 5000
          })
          this.getTrackingList()
        })
    },
    createCardInfo(formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.$confirm('此操作将添加新卡, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.dialogAddpersonalCard = false
            addPerCardObj(this.personalCardForm)
              .then((response) => {
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 5000
                })
                this.getPersonalCardList()
              })
          })
        } else {
          return false
        }
      })
    },
    getPersonalCardList() {
      this.listQueryCard.personalId = this.personalId
      getPerCardObj(this.listQueryCard)
        .then(response => {
          this.personalCardList = response.body.data.rows
          this.totalCard = response.body.data.total
        })
    },
    getPersonalInfo() {
      getPersonalObj(this.personalId)
        .then(response => {
          this.personalInfo = response.personalInfo
          this.customerId = this.personalInfo.customerId
          if (this.customerId !== '' && this.customerId !== null && this.customerId !== undefined) {
            this.getCustomerInfo()
          }
          this.getPeopleNetwork()
          this.getTrackingList()
        })
    },
    getPeopleNetwork() {
      var str = {}
      str.personalId = this.personalId
      str.platformId = this.personalInfo.platformId
      queryPeopleNetwork(str)
        .then(response => {
          this.parentPersonalBase = response.parentPersonalBase
          this.childPersonals = response.childPersonals
        })
    },
    getCustomerInfo() {
      getCustObj(this.customerId)
        .then(response => {
          this.customerInfo = response.CustomerBase
        })
    },
    getPerAccList() {
      var str = {}
      str.personalId = this.personalId
      getPerAccObj(str)
        .then(response => {
          this.personalAccountList = response.personalAccountList
        })
    },
    getTrackingList() {
      var str = {}
      str.personalId = this.personalId
      str.platformId = this.personalInfo.platformId
      queryTrackingList(str)
        .then(response => {
          console.log('-----response------------------------------------')
          console.log(response)
          this.trackingList = response.personalBaseTrackings
          this.trackingLength = this.trackingList.length
        })
    },
    resetForm() {
      this.personalCardForm = {
        platformId: '',
        personalId: '',
        bindCardNo: '',
        cardholderName: '',
        bankNo: '',
        bankName: '',
        subbranchNo: '',
        subbranchName: ''
      }
      this.personalTrackForm = {
        platformId: '',
        tickerPersonalId: '',
        personalId: '',
        remark: ''
      }
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    }
  }
}
</script>
<style>
.imageCss01{
  width: 220px;
  height: 120px;
}
.imageCss02{
  margin-top: 40px;
  width: 120px;
  height: 120px;
}
.backcontent{
  background-color: #f0f2f5;
}
.first_table_steps{
  width: 100%;
  display: inline-block;
  min-width: 1200px;
}
.tableContent{
  float: left;
  width: 60%;
}
.stepsContent{
  width: 38%;
  height: 100%;
  float: right;
}
.bg-steps-detail {
  padding: 20px;
  margin-bottom: 10px;
  background-color: #ffffff;
  height:600px;
  overflow:auto
}
.titleCss{
  width: 100%;
  height: 60px;
  margin-bottom: 2px;
  padding-left: 20px;
  font-size: 18px;
  font-weight: bold;
  line-height: 60px;
  background-color: #ffffff;
}
.pContentCss{
  display: inline-block;
}
.pitemCss{
  min-width: 300px;
  width: 32%;
  float: left;
  line-height: 30px;
}
.content-title{
  display: block;
  float: left;
}
.bg-cust-detail {
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 10px;
  background-color: #ffffff;
}

.bg-purple {
}
.bg-purple-light {
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  font-size: 14px;
  line-height: 36px;
}
.titleCss .el-button{
  height: 28px !important;
  margin-left: 10px !important;
  padding: 6px 15px !important;
}
.bg-cust-addBtn {
  margin-left: 200px;
  margin-bottom: 10px;
}
.bg-cust-account {
  background: #ffffff;
  margin-bottom: 10px;
  padding: 10px 20px;
}
</style>